<template>
	<view class="delivery">
		<!-- 头部三个tab项 -->
		<view class="delivery-state flex align-center justify-around ">
			<view class="state-item " :class="{'active':current === -1}" @click="sectionChange(-1)">全部</view>
			<view class="state-item " :class="{'active':current === 0}" @click="sectionChange(0)">待支付</view>
			<view class="state-item " :class="{'active':current === 1}" @click="sectionChange(1)">已支付</view>
			<view class="state-item " :class="{'active':current === 2}" @click="handleClickOrderQuery">订单查询</view>
		</view>
		<view v-if="operation === 'list'">
			<!-- 列表 -->
			<view class="order-item" v-for="(item,index) in orderList" :key="item.oid">
				<view class="text-xl margin-bottom-sm"><text class="text-bold">[数据分析]</text> {{ item.des }}</view>
				<view class="text-df  margin-bottom-sm">订单号：{{item.oid}}</view>
				<view class="text-df  margin-bottom-sm">下单日期：{{getTime(item.createtime)}}</view>
				<view class="flex align-center">
					<view class="btn-group active2" @click="toPages('/pages/order/order?oid=' + item.oid)"
						v-if="item.status === 0">去付款</view>
					<view class="btn-group active2" @click="toPages('/pages/report/report?oid=' + item.oid)"
						v-if="item.status === 1">查看报告</view>
				</view>
				<view class="order-item-status error" v-if="item.status === 0">待支付</view>
				<view class="order-item-status success" v-if="item.status === 1">已支付</view>
			</view>
			<!-- 提示内容 -->
			<view class="padding">
				<view v-if="noData" class="empty">暂无数据</view>
				<view class="flex align-center justify-center text-gray text-df"
					v-if="this.orderList.length === total && total >0">
					已加载全部内容
				</view>
			</view>
		</view>
		<view v-if="operation === 'query'" style="background-color: #fff; padding-bottom: 50rpx; overflow: hidden;">
			<view class="form-order">
				<input type="text" class="order-input" placeholder="请输入您的订单号" v-model="orderNumber"
					placeholder-style="color:#81b3ff" />
				<view @click="handleSearchOrder" class="order-btn">查询</view>
			</view>
			<view class="order-tips">
				温馨提示：忘记或找不到订单号？请按照下方操作获取
			</view>
			<view class="wx-title">微信支付获取订单号</view>
			<view class="wx-img">
				<image src="https://ydh5res.onlineweixin.com/cy/index_files/cx_wx.jpg?v=123" mode="widthFix"
					style="width: 750rpx;">
				</image>
			</view>
			<view class="wx-title">支付宝支付获取订单号</view>
			<view class="wx-img">
				<image src="https://ydh5res.onlineweixin.com/cy/index_files/cx_zfb.jpg?v=123" mode="widthFix"
					style="width: 750rpx;">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import {
		toPage
	} from "@/tools";

	import {
		myOrderList,
		getOrderInfo,
		getOrderByPayOrder,
		getOrderListByIds
	} from "@/api/index";

	export default {
		data() {
			return {
				orderIds: [],
				orderNumber: '', // 订单号
				operation: 'list',
				list: ['全部订单', '待支付', '已支付'],
				current: -1,
				page: 1,
				limit: 10,
				total: 0,
				orderList: [],
				isMore: true,
				noData: false,
			}
		},
		onShow() {
			// #ifdef H5
			this.getOrderIdsFromLocalStorage()
			this.getOrderListByOrderIds()
			// #endif
			this.page = 1
			// #ifdef MP-ALIPAY || MP-TOUTIAO
			this.getOrderInfo()
			// #endif
		},
		onUnload() {
			this.orderNumber = ''
		},
		onHide() {
			this.orderNumber = ''
		},
		onReachBottom() {
			if (this.operation === 'query') {
				return
			}
			if (!this.isMore) return;
			this.page++;
			// #ifdef H5
			this.getOrderListByOrderIds()
			// #endif
			// #ifdef MP-ALIPAY || MP-TOUTIAO
			this.getOrderInfo();
			// #endif
		},
		methods: {
			async getOrderListByOrderIds() {
				console.log(this.orderIds)
				uni.showLoading({
					title: '加载中'
				})
				const res = await getOrderListByIds({
					status: this.current,
					oidStr: this.orderIds.join(','),
					page: this.page,
					limit: this.limit
				})
				if (res.status === 200) {
					uni.hideLoading()
				
					this.page === 1 ? (this.orderList = res.data) : (this.orderList = [...this.orderList, ...res
						.data
					]);
					this.total = res.total_number;
					this.noData = res.data.length === 0;
					if (this.orderList.length < res.total_number) {
						this.isMore = true
					} else {
						this.isMore = false
					}
				} else {
					uni.hideLoading()
					this.noData = true
				}
				uni.stopPullDownRefresh()
			},
			// 从内存中读取订单号
			getOrderIdsFromLocalStorage() {
				const orderIds = uni.getStorageSync('orderIds') ? JSON.parse(uni.getStorageSync('orderIds')) : []
				
				this.orderIds = orderIds
			},
			// 订单查询接口
			async handleSearchOrder() {
				uni.showLoading({
					title: '加载中'
				})
				const res = await getOrderInfo({
					oid: this.orderNumber
				})
				uni.hideLoading()
				if (res.status === 200) {
					if (res.data.xingZuoHaiShiXinLi === 'xinli') {
						this.toPages('/pages/report/report?oid=' + res.data.oid)
					} else if (res.data.xingZuoHaiShiXinLi === 'xingzuo') {
						this.toPages('/pages/report/report1?oid=' + res.data.oid)
					}

				} else {
					uni.showToast({
						title: res.info
					})
				}
			},
			// 点击订单查询
			handleClickOrderQuery() {
				this.operation = 'query'
				this.current = 2
			},
			// 对Unix时间戳进行格式化
			getTime(createTime) {
				const dayjsObj = dayjs.unix(createTime)
				const formattedDate = dayjsObj.format('YYYY-MM-DD HH:mm:ss')
				return formattedDate
			},
			//    切换状态
			sectionChange(num) {
				this.current = num
				this.page = 1
				this.operation = 'list'
				// #ifdef MP-ALIPAY || MP-TOUTIAO
				this.getOrderInfo()
				// #endif
				// #ifdef H5
				this.getOrderListByOrderIds()
				// #endif
			},
			//  获取订单列表
			async getOrderInfo() {
				uni.showLoading({
					title: '加载中'
				})
				const res = await myOrderList({
					status: this.current,
					page: this.page,
					limit: this.limit
				})
				if (res.status === 200) {
					uni.hideLoading()

					this.page === 1 ? (this.orderList = res.data) : (this.orderList = [...this.orderList, ...res
						.data
					]);
					this.total = res.total_number;
					this.noData = res.data.length === 0;
					if (this.orderList.length < res.total_number) {
						this.isMore = true
					} else {
						this.isMore = false
					}
				}
				uni.stopPullDownRefresh()
			},
			//  页面跳转
			toPages(url) {
				toPage(url)
			}
		}
	}
</script>

<style scoped lang="scss">
	.delivery {
		padding-top: 88rpx;

		.delivery-state {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 88rpx;
			background: #fff;
			z-index: 29;

			.state-item {
				display: flex;
				align-items: center;
				justify-content: space-around;

				width: 33.33%;
				height: 88rpx;
				font-size: 32rpx;

				&.active {
					color: #14385f;
					font-weight: bold;
					border-bottom: 4rpx solid #007aff;
				}
			}
		}

		.order-item {
			width: 690rpx;
			margin: 30rpx auto;
			padding: 10rpx 20rpx 20rpx;
			border-radius: 30rpx;
			box-sizing: border-box;
			border: 2rpx solid #fff;
			color: #fff;
			background: #667d96;
			position: relative;

			.order-item-status {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				width: 110rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				font-size: 28rpx;
				border-radius: 8rpx;
				color: #fff;
				border: none;

				&.error {
					background-color: #f56c6c;
				}

				&.success {
					background-color: #67c23a;
				}
			}

			.btn-group {
				width: 100%;
				height: 68rpx;
				//border: 2rpx solid #ccc;
				text-align: center;
				line-height: 64rpx;
				font-size: 28rpx;
				border-radius: 10rpx;
				background: #14385f;

				&.active {
					background: #e4393c;
					color: #fff;
					border: 2rpx solid #e4393c;
				}
			}
		}
	}

	.empty {
		color: #fff;
		text-align: center;
	}

	.form-order {
		width: 750rpx;
		padding: 40rpx 26rpx;
		display: flex;
		flex-direction: row;
		align-items: center;

		.order-input {
			width: 520rpx;
			height: 72rpx;
			line-height: 72rpx;
			border: 1px solid #dbdbdb;
			padding-left: 20rpx;
			border-radius: 16rpx;
		}

		.order-btn {
			width: 100rpx;
			height: 72rpx;
			background-color: #dc273f;
			text-align: center;
			line-height: 72rpx;
			color: #fff;
			margin-left: 20rpx;
			border-radius: 16rpx;
		}

	}

	.order-tips {
		width: 630rpx;
		padding: 30rpx 26rpx;
		margin: 0 auto;
		font-size: 18px;
		line-height: 1.5;
		color: #333;
		border: 1px solid #d3d3d3;
		border-radius: 10rpx;
	}

	.wx-title {
		width: 750rpx;
		height: 92rpx;
		margin: 30rpx 0;
		line-height: 92rpx;
		font-size: 22px;
		color: #03ab54;
		text-align: center;
		background-color: #eeeeee;
		font-weight: bold;
	}

	.wx-img {
		width: 750rpx;
	}
</style>